<template>
  <div class="search">
    <Card>
      <Form
        ref="searchForm"
        @keydown.enter.native="handleSearch"
        :model="searchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="商品编号" prop="skuId">
          <Input
            type="text"
            v-model="searchForm.skuId"
            placeholder="请输入商品编号"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="商品名称" prop="skuName">
          <Input
            type="text"
            v-model="searchForm.skuName"
            placeholder="请输入商品名称"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="商品分类" prop="cateLogId">
          <CateCascader
            @selected="selectedCateInAdd"
            :key="new Date().getTime()"
            :cateId="searchForm.cateLogId"
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="商品品牌" prop="brandId">
          <Select v-model="searchForm.brandId" filterable style="width: 200px">
            <Option
              v-for="item in brandList"
              :value="item.brandId"
              :key="item.brandId"
              >{{ item.name }}</Option
            >
          </Select>
        </Form-item>
        <Form-item label="审核状态" prop="reviewStatus">
          <Select
            v-model="searchForm.reviewStatus"
            filterable
            style="width: 200px"
          >
            <Option
              v-for="item in reviewStatus"
              :value="item.key"
              :key="item.key"
              >{{ item.value }}</Option
            >
          </Select>
        </Form-item>
        <Form-item label="上架状态" prop="publishStatus">
          <Select
            v-model="searchForm.publishStatus"
            filterable
            style="width: 200px"
          >
            <Option
              v-for="item in publishStatus"
              :value="item.key"
              :key="item.key"
              >{{ item.value }}</Option
            >
          </Select>
        </Form-item>
        <Button
          @click="handleSearch"
          class="search-btn"
          type="primary"
          icon="ios-search"
          >搜索</Button
        >
      </Form>
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        class="mt_10"
      >
        <template #productImg="{ row }">
          <div class="demo-upload-list" style="height: 100px">
            <img
              :src="row.skuImg"
              style="height: 100px; margin-top: 3px; width: 100px"
            />
            <!-- <Image  :src="row.showImg" :fit="fit" width="100px" height="100px" :alt="fit" /> -->
            <div class="demo-upload-list-cover">
              <Icon
                type="ios-eye-outline"
                @click="handleViewGoodsPicture1(row)"
              ></Icon>
            </div>
          </div>
        </template>
        <template #price="{ row }">
          <div>{{ '¥ ' + row.price }}</div>
        </template>
        <template #reviewStatus="{ row }">
          <Tag color="gold" v-show="row.reviewStatus == 2">审核中</Tag>
          <Tag color="success" v-show="row.reviewStatus == 1">通过</Tag>
          <Tag color="error" v-show="row.reviewStatus == 0">拒绝</Tag>
        </template>
        <template #publishStatus="{ row }">
          <Tag color="success" v-show="row.publishStatus == 1">上架</Tag>
          <Tag color="error" v-show="row.publishStatus == 0">下架</Tag>
        </template>
        <template #action="{ row }">
          <Button type="warning" size="small" @click="editSkuModalShow(row)"
            >编辑</Button
          >
          <Button
            size="small"
            style="margin-left: 10px"
            @click="skuStockShow(row)"
            >库存</Button
          >
          <Button
            type="primary"
            style="margin-left: 10px"
            size="small"
            @click="deleteSku(row)"
            >删除</Button
          >
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <Modal title="View Image" v-model="goodsPictureVisible">
      <img
        :src="previewGoodsPicture"
        v-if="goodsPictureVisible"
        style="width: 100%"
      />
    </Modal>
    <Modal title="编辑Sku信息" v-model="editSkuVisible">
      <Form :model="formSku" :label-width="80">
        <FormItem label="商品编号:">
          <Input v-model="formSku.skuId" disabled></Input>
        </FormItem>
        <FormItem label="商品名称:">
          <Input v-model="formSku.skuName"></Input>
        </FormItem>
        <FormItem label="商品图片:">
          <upload-pic-single
            :pictureList="formSku.skuImg"
            @descriptSuccess="descriptUploadSuccess"
            style="width: 80%"
          ></upload-pic-single>
        </FormItem>
        <FormItem label="商品分类:">
          <CateCascader
            @selected="selectedCateInAdd"
            :key="new Date().getTime()"
            :cateId="formSku.cateLogId"
            style="width: 200px"
          />
        </FormItem>
        <FormItem label="商品品牌:">
          <Select v-model="formSku.brandId" filterable style="width: 200px">
            <Option
              v-for="item in brandList"
              :value="item.brandId"
              :key="item.brandId"
              >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="商品价格:">
          <Input v-model="formSku.price"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submitEditSku">提交</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal title="Sku库存" v-model="skuStockVisible">
      <Tabs value="updateStock">
        <TabPane label="库存情况" name="updateStock">
          <Form :model="formStock" :label-width="80">
            <FormItem label="商品编号">
              <Input v-model="formStock.skuId" disabled></Input>
            </FormItem>
            <FormItem label="商品名称">
              <Input v-model="formStock.skuName" disabled></Input>
            </FormItem>
            <FormItem label="商品库存">
              <Input v-model="formStock.stock" style="width: 200px"></Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="editSkuStock">修改库存</Button>
            </FormItem>
          </Form>
        </TabPane>
      </Tabs>
    </Modal>
  </div>
</template>

<script>
import CateCascader from '@/views/my-componts/CateCascader.vue';
import UploadPicSingle from '@/views/my-componts/UploadPicSingle.vue';
import * as APIBrand from '@/api/myapi/Brand.js';
import * as APISku from '@/api/myapi/Sku.js';
import * as APIWare from '@/api/myapi/Ware.js';
export default {
  name: 'good-sku',
  components: { CateCascader, UploadPicSingle },
  data() {
    return {
      loading: true, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: 'create_time', // 默认排序字段
        order: 'desc', // 默认排序方式
      },
      total: 0, // 表单数据总数
      // 品牌列表
      brandList: [],
      // 根据审核状态查询
      reviewStatus: [
        {
          key: 0,
          value: '未通过',
        },
        {
          key: 1,
          value: '通过',
        },
        {
          key: 2,
          value: '审核中',
        },
      ],
      // 根据上架状态查询
      publishStatus: [
        {
          key: 0,
          value: '下架',
        },
        {
          key: 1,
          value: '上架',
        },
      ],
      // 表格loading
      loading: true,
      // 表格数据
      data: [],
      // 表格列
      columns: [
        {
          title: '商品编号',
          key: 'id',
          minWidth: 200,
          tooltip: true,
          align: 'center',
        },
        {
          title: '商品名称',
          key: 'skuName',
          minWidth: 140,
          tooltip: true,
          align: 'center',
        },
        {
          title: '商品图片',
          slot: 'productImg',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '商品分类',
          key: 'cateName',
          minWidth: 100,
          align: 'center',
          tooltip: true,
        },
        {
          title: '商品品牌',
          key: 'brandName',
          minWidth: 100,
          align: 'center',
          tooltip: true,
        },
        {
          title: '商品价格',
          slot: 'price',
          minWidth: 100,
          align: 'center',
          tooltip: true,
        },
        {
          title: '审核状态',
          slot: 'reviewStatus',
          minWidth: 80,
          align: 'center',
          tooltip: true,
        },
        {
          title: '上架状态',
          slot: 'publishStatus',
          minWidth: 80,
          align: 'center',
          tooltip: true,
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 100,
          align: 'center',
        },
      ],
      // 图片展示框是否可用
      goodsPictureVisible: false,
      // 展示的图片的地址
      previewGoodsPicture: '',
      // 编辑sku的对话框显示
      editSkuVisible: false,
      // 编辑sku表单项
      formSku: {
        skuId: null,
        skuName: '',
        skuImg: '',
        cateLogId: null,
        brandId: null,
        price: '',
      },
      // sku库存展示窗口是否展示
      skuStockVisible: false,
      // 库存表单
      formStock: {
        skuId: null,
        skuName: '',
        stock: null,
      },
    };
  },
  methods: {
    init() {
      // 初始化数据
      this.getDataList();
      this.getBrandList();
    },
    // 获取数据
    getDataList() {
      console.log('测试查询参数', this.searchForm);
      APISku.getSkuByPage(this.searchForm).then((res) => {
        this.loading = false;
        if (res.data.code == 201) {
          this.data = res.data.obj.records;
          this.total = parseInt(res.data.obj.total);
        }
      });
    },
    // 搜索
    handleSearch() {
      // 搜索
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    // 分类选择
    selectedCateInAdd(item) {
      let arr = item[0];
      this.searchForm.cateLogId = arr[2];
    },
    // 获取品牌
    getBrandList() {
      APIBrand.getAllBrand().then((res) => {
        if (res.data.code == 201) {
          this.brandList = res.data.obj;
        }
      });
    },
    changePage(v) {
      // 改变页码
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      // 改变每页数量
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    // 图片详情对话框展示
    handleViewGoodsPicture1(row) {
      this.goodsPictureVisible = true;
      this.previewGoodsPicture = row.skuImg;
    },
    editSkuModalShow(row) {
      this.editSkuVisible = true;
      console.log('点击编辑Sku:', row);
      this.formSku.skuId = row.id;
      this.formSku.skuName = row.skuName;
      this.formSku.skuImg = row.skuImg;
      this.formSku.cateLogId = row.cateLogId;
      this.formSku.brandId = row.brandId;
      this.formSku.price = row.price + '';
    },
    // 商品详情描述上传成
    descriptUploadSuccess(param) {
      this.formSku.skuImg = param;
    },
    // 提交修改
    submitEditSku() {
      console.log('点击提交sku修改:', this.formSku);
      APISku.editSku(this.formSku).then((res) => {
        if (res.data.code == 201) {
          this.editSkuVisible = false;
          this.$Message.success('更新成功');
          this.getDataList();
        } else {
          this.$Message.success('更新失败,请稍后重试');
        }
      });
    },
    deleteSku(row) {
      this.$Modal.confirm({
        title: '删除Sku',
        content: '您确定要删除商品 ' + row.skuName + ' ?',
        // loading: this.loading,
        onOk: () => {
          APISku.deleteSku(row.id).then((res) => {
            if (res.data.code == 201) {
              this.$Message.success('删除成功');
              this.getDataList();
            } else {
              this.$Message.success('删除失败,请重试');
            }
          });
        },
      });
    },
    skuStockShow(row) {
      this.skuStockVisible = true;
      console.log('sku库存操作:', row);
      this.formStock.skuId = row.id;
      this.formStock.skuName = row.skuName;
      APIWare.getSkuWareNumber(row.id).then((res) => {
        if (res.data.code == 201) {
          this.formStock.stock = res.data.obj;
        }
      });
    },
    editSkuStock() {
      console.log('点击修改库存:', this.formStock);
      let params = {
        skuId: this.formStock.skuId,
        stock: this.formStock.stock,
      };
      APIWare.editSkuStock(params).then((res) => {
        if (res.data.code == 201) {
          this.skuStockVisible = false;
          this.$Message.success('库存修改成功');
        } else {
          this.$Message.success('库存修改失败');
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.demo-upload-list {
  display: inline-block;
  width: 160px;
  height: 150px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  margin: 20 20px;
}
</style>
